#{extends 'main.html' /}
#{set title:'Claim new project' /}
#{set hasForm: true /}

#{set 'moreScripts'}
    <script src="@{'/public/javascripts/jquery-ui-1.8.18.autocomplete.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
#{/set}

#{set 'moreStyles'}
    <style>
        /* Adapt the Bootstrap style to jQuery UI */
        .dropdown-menu a.ui-state-hover {
            color: white;
            text-decoration: none;
            background-color: #08C;
        }
        /* Fix license button indention */
        #license-btn {
            margin-left: -5px;
        }
    </style>
#{/set}

<div class="alert alert-info">
    <p>
        All of this is purely for reviewing purposes and will never be public.
    </p>
    <p>
        Keep in mind we will need to review your project claim in order to grant you the right to
        publish this module. You will be informed by email of the outcome of the review as soon as
        possible.
    </p>
    <p>
        Once you are allowed to publish a module, you can publish as many versions of this module
        as you want, and can grant other people permission to publish new versions on your behalf.
    </p>
</div>

#{form action: @Projects.claim(), class: "form-horizontal"}

<fieldset>
    <legend>Claim new project</legend>
    <div class="control-group #{errorClassBootstrap 'module'/}">
        <label class="control-label" for="module">Module name</label>
        <div class="controls">
            <input name="module" value="${module ?: flash.module}" maxlength="${util.Util.VARCHAR_SIZE}"/>
            <span class="help-inline">​#{error 'module'/}</span>
            <p class="help-block">This is the fully-qualified name of your module, without the version. 
                See our <a href="@{Application.guidelines}"><i class="icon-info-sign"></i> Module naming guidelines</a>.</p>
        </div>
    </div>
    <div class="control-group #{errorClassBootstrap 'license'/}">
        <label class="control-label" for="license">License</label>
        <div class="controls">
            <div class="input-append">
                <input name="license" id="license" value="${flash.license}" maxlength="${util.Util.VARCHAR_SIZE}"/>
                <button id="license-btn" class="btn" type="button"><span class="caret"></span></button>
            </div>
            <span class="help-inline">​#{error 'license'/}</span>
            <p class="help-block">Keep in mind we only accept <a href="http://www.opensource.org">open-source</a> modules</p>
        </div>
    </div>
    <div class="control-group #{errorClassBootstrap 'url'/}">
        <label class="control-label" for="url">URL</label>
        <div class="controls">
            <input name="url" value="${flash.url}" maxlength="${util.Util.VARCHAR_SIZE}"/>
            <span class="help-inline">​#{error 'url'/}</span>
            <p class="help-block">Your project´s home page</p>
        </div>
    </div>
    <div class="control-group #{errorClassBootstrap 'role'/}">
        <label class="control-label" for="role">Your role in the project</label>
        <div class="controls">
            <input name="role" value="${flash.role}" maxlength="${util.Util.VARCHAR_SIZE}"/>
            <span class="help-inline">​#{error 'role'/}</span>
            <p class="help-block">We need to know what your relation is to the project</p>
        </div>
    </div>
    <div class="control-group #{errorClassBootstrap 'description'/}">
        <label class="control-label" for="description">Project description</label>
        <div class="controls">
            <textarea name="description" class="input-xxlarge" rows="10" maxlength="${util.Util.TEXT_SIZE}">${flash.description}</textarea>
            <span class="help-inline">​#{error 'description'/}</span>
            <p class="help-block">Tell us what this project does, we may have not yet heard about it</p>
        </div>
    </div>
    <div class="control-group #{errorClassBootstrap 'motivation'/}">
        <label class="control-label" for="motivation">Motivation</label>
        <div class="controls">
            <textarea name="motivation" class="input-xxlarge" rows="10" maxlength="${util.Util.TEXT_SIZE}">${flash.motivation}</textarea>
            <span class="help-inline">​#{error 'motivation'/}</span>
            <p class="help-block">Why should this be in Ceylon Herd?</p>
        </div>
    </div>
    <div class="form-actions">
        <a href="@{Projects.index()}" class="btn">Cancel</a>​
        <input type="submit" class="btn btn-primary" value="Claim project"/>
    </div>
</fieldset>

#{/form}

<script type="text/javascript">
jQuery("#license")
  .autocomplete({ source: ${util.Util.LICENSES_JSON.raw()}, minLength: 0 })
  .data("autocomplete").menu.element.addClass("typeahead dropdown-menu");
  
jQuery("#license-btn").click(function() {
    jQuery("#license").autocomplete("search", "");
    jQuery("#license").focus();
});
</script>